<template>
  <div class="cart">
    <BackT></BackT>
    <!-- 没有登录 -->
    <div v-if="!isLogin" class="noLogin">
      <h2>请登录，购物车空空如也</h2>
      <button @click="goLogin">登录</button>
    </div>
    <!--登录    1.有商品 2.无商品 -->
    <div class="cart" v-else>
      
      <!-- 1.无商品 -->
      <div v-if="cartList.length === 0">
        购物车空空，请挑选喜欢的商品吧！
        <!-- <p><button>去购物</button></p> -->
      </div>
      <!-- 2.有商品 -->
      <div class="cartList-show" v-if="cartList.length > 0">
        <div class="cart-item" v-for="(item, index) in cartList" :key="index">
          <div class="cartList-item-top">
            <!-- 勾选框 -->
            <div class="check-top">
              <div
                class="check"
                @click="select(index)"
                :class="item.select ? 'active' : ''"
              >
                √
              </div>
              <div class="item-top-shop">{{ item.shop }}</div>
            </div>
            <div class="prd-item">
              <!-- 勾选框 -->
              <div
                class="check"
                @click="select(index)"
                :class="item.select ? 'active' : ''"
              >
                √
              </div>
              <img :src="item.img" alt="" width="150px" height="150px" />
              <div class="prd-item-con" style="width: 100%">
                <div class="iten-con-right">{{ item.name }}</div>
                <div class="right-class">{{ item.color }} {{ item.size }}</div>
                <div class="button">
                  <p style="color: red">
                    <span style="font-size: 12px">￥:</span>{{ item.pic }}
                  </p>
                  <!-- <p style="color: red">
                    <span style="font-size: 12px">小计:￥</span>{{ pay}}
                  </p> -->
                 
                  <div>
                    <button @click="reduce(index)" :disabled="item.num <= 1">
                      -</button
                    ><span>{{ item.num }}</span>
                    <button @click="add(index)">+</button>
                    <span class="del" @click="deletes(index, item.id)"
                      >删除</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom" v-if="isLogin">
      <div class="allSec">
        <div
          class="check"
          @click="allChecked"
          :class="allCheck ? 'active' : ''"
        >
          √
        </div>
        <span>全选</span>
      </div>
      <div class="pay">
        <span>总计:￥{{ Allpay }}.00元</span>
        <button>去结算({{ payNum }})</button>
      </div>
    </div>
    <!-- <Footer></Footer> -->
  </div>
</template>

<script>
import BackT from '@/heightComponent/Top/BackT.vue';

export default {
  components: { BackT },
  data() {
    return {
      isLogin: false, //默认没有登录
      cartList: [],
      allCheck: true, //全选
      pay: 0,
    };
  },
  computed: {
    Allpay() {
      //总价
      let allPay = 0;
      for (let i = 0; i < this.cartList.length; i++) {
        if (this.cartList[i].select)
          allPay += this.cartList[i].num * this.cartList[i].pic;
      }
      this.pay = allPay;
      return this.pay;
    },
    payNum() {
      //结算的商品数量
      let num = 0;
      for (let i = 0; i < this.cartList.length; i++) {
        if (this.cartList[i].select) {
          num++;
        }
      }
      return num;
    },
  },
  created() {
    //判断用户是否登录 获取sessionStorage里的token
    if (sessionStorage.getItem("token")) {
      this.isLogin = true; //显示登录后的数据
      this.getCartList();
    } else {
      //显示未登录
      this.isLogin = false;
    }
  },
  
  methods: {
    goLogin() {
      //跳转到登录页
      this.$router.push("/login");
    },
    getCartList() {
      //获取购物车中的数据=》
      // let arr = [
      //   {
      //     shop: "李宁官方旗舰店",
      //     img: "//m.360buyimg.com/mobilecms/s750x750_jfs/t1/191294/22/27522/63953/62fccdc9E7bd256fe/663227f11ea3fb79.jpg!q80.dpg",
      //     name: "CHINISM CH连帽卫衣男高街潮牌宽松外套潮流ins运动简约情侣装SC20071117 花灰色 XL",
      //     spic: "108",
      //     num: 1,
      //     pic: "88",
      //     type: {
      //       colorList: ["黑色", "白色"],
      //       size: ["xs", "s", "m", "l", "xl", "xxl"],
      //     },
      //     selectType: { color: "黑色", size: "s" },
      //   },
      //   {
      //     shop: "悟空官方旗舰店",
      //     img: "//m.360buyimg.com/mobilecms/s750x750_jfs/t1/192200/40/27892/38771/62fcb0d5Eea196c08/489cadff2126b0b0.jpg!q80.dpg",
      //     name: "CHINISM CH卫衣男潮牌ins宽松潮流圆领纯色套头长袖运动情侣装SC20071016 卡其色 M",
      //     spic: "208",
      //     num: 1,
      //     pic: "158",
      //     type: {
      //       colorList: ["黑色", "白色"],
      //       size: ["xs", "s", "m", "l", "xl", "xxl"],
      //     },
      //     selectType: { color: "黑色", size: "s" },
      //   },
      //   {
      //     shop: "悟空官方旗舰店",
      //     img: "//m.360buyimg.com/mobilecms/s750x750_jfs/t1/192200/40/27892/38771/62fcb0d5Eea196c08/489cadff2126b0b0.jpg!q80.dpg",
      //     name: "CHINISM CH卫衣男潮牌ins宽松潮流圆领纯色套头长袖运动情侣装SC20071016 卡其色 M",
      //     spic: "208",
      //     num: 1,
      //     pic: "158",
      //     type: {
      //       colorList: ["黑色", "白色"],
      //       size: ["xs", "s", "m", "l", "xl", "xxl"],
      //     },
      //     selectType: { color: "黑色", size: "s" },
      //   },
      //   {
      //     shop: "悟空官方旗舰店",
      //     img: "//m.360buyimg.com/mobilecms/s750x750_jfs/t1/192200/40/27892/38771/62fcb0d5Eea196c08/489cadff2126b0b0.jpg!q80.dpg",
      //     name: "CHINISM CH卫衣男潮牌ins宽松潮流圆领纯色套头长袖运动情侣装SC20071016 卡其色 M",
      //     spic: "208",
      //     num: 1,
      //     pic: "158",
      //     type: {
      //       colorList: ["黑色", "白色"],
      //       size: ["xs", "s", "m", "l", "xl", "xxl"],
      //     },
      //     selectType: { color: "黑色", size: "s" },
      //   },
      // ];
      //给每个对象添加一个select: true ，利用这个属性进行勾选，计价功能
      let arr = this.$store.state.cartList;
      for (let i = 0; i <arr.length; i++) {
        this.cartList.push({ ...arr[i], select: true });
      }
      // console.log(this.cartList);
      // 点击立即购买的按钮，调用的是vuex里面push方法，会把vuex的购物车默认数据追加进去
      // 有多条数据时，删除第一条默认数据
      this.cartList.length > 2 && this.cartList.splice(0, 1);
    },
    reduce(index) {
      //数量-
      this.cartList[index].num = this.cartList[index].num - 1;
    },
    add(index) {
      //数量+
      this.cartList[index].num = this.cartList[index].num + 1;
    },
    select(index) {
      //单选
      this.cartList[index].select = !this.cartList[index].select;
      this.allCheck = this.cartList.every((v) => v.select);
    },
    allChecked() {
      //全选
      this.allCheck = !this.allCheck;
      if (this.allCheck) {
        for (let i = 0; i < this.cartList.length; i++) {
          this.cartList[i].select = true;
        }
      } else {
        for (let i = 0; i < this.cartList.length; i++) {
          this.cartList[i].select = false;
        }
      }
    },
    deletes(index) {
      //删除商品
      // console.log(index);
      this.cartList.splice(index, 1);
    },
  },
};
</script>

<style scoped lang='scss'>
.check {
  width: 100px;
  height: 100px;
  text-align: center;
  border-radius: 50%;
  padding-top: 15px;
  font-size: 80px;
  color: white;
  flex-shrink: 0; //不被其他元素挤压
  border: 1px solid #ccc;
}
.active {
  background: red;
}
.cart {
  width: 100%;
  margin-bottom: 500px;
  position: absolute;
  top: 150px;
  .cartList-show {
    margin-top: 100px;
    .cart-item {
      margin-top: 100px;
      display: flex;
      .check-top {
        display: flex;
        margin-left: 50px;
        .item-top-shop {
          margin-left: 50px;
        }
      }
      .prd-item {
        width: 100%;
        display: flex;
        align-items: center;
        margin-left: 50px;

        img {
          margin-left: 30px;
        }
        .prd-item-con {
          padding-left: 30px;
        }
        .iten-con-right {
          width: 795px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 12px;
          .right-class {
            padding-top: 100px;
          }
        }
        button {
          margin-top: 170px;
        }
        .del {
          margin-left: 100px;
          color: red;
          text-decoration: underline;
        }
      }
    }
  }
  .bottom {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    z-index: 1;
    bottom: 290px;
    background: white;
    .pay {
      display: flex;
      margin-left: 50px;
      align-items: center;
      button {
        margin-left: 50px;
        width: 500px;
        height: 150px;
        background: red;
        border: none;
        border-radius: 100px;
        color: white;
      }
    }
  }
  .allSec {
    display: flex;
    margin-left: -90px;
    align-items: center;
    span {
      margin-left: 30px;
      font-size: 14px;
    }
  }
}
</style>